<div class="main-section">
    <h1 class="main-section__title">Dropdown</h1>

    <p class="main-section__intro">
        <code>lx-dropdown</code> is a directive that create a dropdown menu.
    </p>

    <lx-component lx-title="Basic usage" lx-path="/includes/modules/dropdown/includes/basic.html">
        Two directives need to be transcluded.<br />
        <code>lx-dropdown-toggle</code> that transclude the toggle button and <code>lx-dropdown-menu</code> that transclude the menu content.
    </lx-component>

    <lx-component lx-title="Advanced usage" lx-path="/includes/modules/dropdown/includes/advanced.html" lx-js-path="/js/dropdown/demo/demo-dropdown_controller.js">
        You can use the service if you want to open a dropdown programmatically.
    </lx-component>

    <lx-component-attributes>
        <table>
            <thead>
                <tr>
                    <th>Parameter</th>
                    <th>Type</th>
                    <th>Default</th>
                    <th>Description</th>
                </tr>
            </thead>

            <tbody>
                <tr>
                    <td>lx-close-on-click</td>
                    <td><code>boolean</code></td>
                    <td><code>true</code></td>
                    <td>Specify if the dropdown should be closed when clicking on the document.</td>
                </tr>
                <tr>
                    <td>lx-effect</td>
                    <td><code>string</code></td>
                    <td><code>expand</code></td>
                    <td>Specify the dropdown menu effect. Options: <code>expand</code>, <code>fade</code>, <code>none</code></td>
                </tr>
                <tr>
                    <td>lx-escape-close</td>
                    <td><code>boolean</code></td>
                    <td><code>true</code></td>
                    <td>Specify if the dropdown should be closed with escape key.</td>
                </tr>
                <tr>
                    <td>lx-hover</td>
                    <td><code>boolean</code></td>
                    <td><code>false</code></td>
                    <td>Specify if the dropdown should be opened on toggle hover.</td>
                </tr>
                <tr>
                    <td>lx-hover-delay</td>
                    <td><code>integer</code></td>
                    <td></td>
                    <td>The dropdown menu open delay in ms (if lx-hover).</td>
                </tr>
                <tr>
                    <td>lx-min-offset</td>
                    <td><code>integer</code></td>
                    <td>8</td>
                    <td>The offset (in px) to keep from the edges of the screen. If the edges of the dropdown should go beyond the edges of the screen, then the dropdown will be brought back to this offset from the edge of the screen.</td>
                </tr>
                <tr>
                    <td>lx-offset</td>
                    <td><code>integer</code></td>
                    <td></td>
                    <td>The dropdown menu offset in px (if not lx-over-toggle).</td>
                </tr>
                <tr>
                    <td>lx-over-toggle</td>
                    <td><code>boolean</code></td>
                    <td><code>false</code></td>
                    <td>Specify if the dropdown should be opened over the toggle button.</td>
                </tr>
                <tr>
                    <td>lx-position</td>
                    <td><code>string</code></td>
                    <td><code>left</code></td>
                    <td>Define the dropdown menu position. Options: <code>left</code>, <code>right</code>, <code>center (if lx-width)</code></td>
                </tr>
                <tr>
                    <td>lx-width</td>
                    <td><code>string</code></td>
                    <td></td>
                    <td>Define the dropdown menu width in pixels. If a percent value is defined, the dropdown menu width will be relative to the width of the toggle button.</td>
                </tr>
            </tbody>
        </table>
    </lx-component-attributes>

    <lx-component-methods lx-title="Service api">
        <lx-component-method lx-name="LxDropdownService.open(dropdownId, targetElement)" lx-description="Open a dropdown from a target outside of the directive.">
            <table>
                <thead>
                    <tr>
                        <th>Parameter</th>
                        <th>Type</th>
                        <th>Description</th>
                    </tr>
                </thead>

                <tbody>
                    <tr>
                        <td>dropdownId*</td>
                        <td><code>string</code></td>
                        <td>The dropdown id specified in the directive id attribute.</td>
                    </tr>
                    <tr>
                        <td>targetElement*</td>
                        <td><code>string</code></td>
                        <td>The target element selector.</td>
                    </tr>
                </tbody>
            </table>
        </lx-component-method>

        <lx-component-method lx-name="LxDropdownService.close(dropdownId)" lx-description="Close a dropdown opened programmatically.">
            <table>
                <thead>
                    <tr>
                        <th>Parameter</th>
                        <th>Type</th>
                        <th>Description</th>
                    </tr>
                </thead>

                <tbody>
                    <tr>
                        <td>dropdownId*</td>
                        <td><code>string</code></td>
                        <td>The dropdown id specified in the directive id attribute.</td>
                    </tr>
                </tbody>
            </table>
        </lx-component-method>
    </lx-component-methods>
</div>
